#{extends 'master.html' /}
#{set 'title'}
&{'Order.summary.title'}
#{/set}
<div class="page-block">
    <h2>&{'Order.summary.header'}</h2>
    <table class="shopping-items">
        <thead>
        <tr>
            <th>&{'Order.summary.table.titleColumn'}</th>
            <th>&{'Order.summary.table.quantityColumn'}</th>
            <th class="item-price">&{'Order.summary.table.unitPriceColumn'}</th>
        </tr>
        </thead>
        #{list items:sCart.items, as:'cartitem'}
        <tr>

            <td><a href="@{Product.display(cartitem.productId)}">${cartitem.title}</a></td>
            <td>${cartitem.quantity}</td>
            <td class="item-price">${cartitem.subtotal}</td>
        </tr>
        #{/list}
        <tfoot>
        <td colspan="2">&{'Order.summary.totalSum'}</td>
        <td class="item-price">${sCart.subtotal}</td>
        </tfoot>
    </table>
    <div class="editcart">

        <a href="@{ShoppingCart.display}">&{'Order.summary.editOrder'}</a>
    </div>
    #{form @Order.place()}
    <div class="form">
        <h3>&{'Order.summary.shippingHeader'}</h3>
        <fieldset>
            <div>
                <label for="userName">&{'Order.summary.userName'}</label>
                <input id="userName" name="userName" type="text" value="${flash.userName}"/>

                #{error 'userName' /}
            </div>
            <div>
                <label for="phoneNumber">&{'Order.summary.phoneNumber'}</label>
                <input type="text" id="phoneNumber" name="phoneNumber" value="${flash.phoneNumber}"/>
                #{error 'phoneNumber' /}
            </div>
            <div>
                <label for="address">&{'Order.summary.address'}</label>
                <textarea id="address" name="address" cols="5" rows="5">${flash.address}</textarea>
                #{error 'address' /}
            </div>

        </fieldset>
    </div>


    <div class="bottom-button">
        <input type="submit" value="&{'Order.summary.placeOrder'}"/>
    </div>
    #{/form}
</div>